<!-- 投诉举报 -->
<template>
  <div class="page">
    <div class="weui-form">
      <div class="weui-form__control-area">
        <div class="weui-form__text-area">
          <h2 class="weui-form__title">投诉举报</h2>
          <div class="weui-form__desc"></div>
        </div>
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">*事件类型</label></div>
              <div class="weui-cell__bd" id="showType">请选择...</div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">*事件描述</label></div>
              <div class="weui-cell__bd">
                <textarea v-model="item.eventInfo" class="weui-textarea required" placeholder="请描述你所发现的问题" rows="3"
                          maxlength="200"></textarea>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">*所在河道</label></div>
              <div class="weui-cell__bd" id="riverDiv">请选择...</div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">举报人</label></div>
              <div class="weui-cell__bd">
                <input v-model="item.reportingUserName" id="reportingUserName" class="weui-input" placeholder="填写举报人"/>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">联系方式</label></div>
              <div class="weui-cell__bd">
                <input v-model="item.reportingUserCellphone" id="reportingUserCellphone" class="weui-input"
                       placeholder="填写您的联系方式" type="number"
                       pattern="[0-9]*"/>
              </div>
            </div>

            <div class="weui-cell  weui-cell_uploader">
              <div class="weui-cell__bd">
                <div class="weui-uploader">
                  <div class="weui-uploader__hd">
                    <p class="weui-uploader__title">*图片上传</p>
                    <div class="weui-uploader__info"><span v-text="files.length"></span>/3</div>
                  </div>
                  <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles">

                    </ul>
                    <div class="weui-uploader__input-box">
                      <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="weui-gallery" id="gallery">
              <div class="weui-gallery__opr">
                <a href="javascript:" class="weui-gallery__del">
                  <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
              </div>
              <span class="weui-gallery__img" id="galleryImg"></span>
            </div>
          </div>
        </div>
        <div class="weui-form__opr-area">
          <a class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" @click="save()"
             id="showTooltips">举报</a>
        </div>
      </div>

      <!--BEGIN toast-->
      <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
          <i class="weui-icon-success-no-circle weui-icon_toast"></i>
          <p class="weui-toast__content">提交成功</p>
        </div>
      </div>
      <div id="infoToast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
          <i class="weui-icon-warn weui-icon_toast"></i>
          <p class="weui-toast__content" id="weui-toast__content"></p>
        </div>
      </div>
      <!--end toast-->
    </div>
  </div>
</template>
<style>
  .img-box {
    display: inline-block;
    border: 1px solid #ececec;
    position: relative;
  }

  .image-remove {
    font-color: #ececec;
    font-size: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 100%;
    transform: rotate(45deg);
    cursor: pointer;
    opacity: 0.5;
    top: -10px;
    right: 0px;
    display: block;
    position: absolute;
  }
</style>
<script type="text/javascript">
  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import {axiosContentType, apiPath} from '@/assets/js/boss'
  import 'weui'
  import wx from 'weixin-js-sdk';
  import weui from 'weui.js'

  export default {
    data() {
      return {
        item: {
          reportingType: 1,
          treatmentType: 2,
          treatmentPrePics: ''
        },
        files: [],
        rivers: []
      }
    },
    mounted() {
      let that = this;
      that.initWeui();
      that.loadRivers();
      that.loadTypes();
      that.wxconfig();
    },
    methods: {
      loadRivers() {
        let that = this;
        axios.get(apiPath + '/api/river/riverInfo/list'
          , null
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.rivers = result.data;
          } else {
            that.showMsg(result.message);
          }
        });
      },
      initWeui() {
        let that = this;
        var $input = $('.required');
        $input.on('input change', function () {
          if ($input.val() && $input.val() !== '') {
            $('#showTooltips').removeClass('weui-btn_disabled');
          } else {
            $('#showTooltips').addClass('weui-btn_disabled');
          }
        });
        // 初始化上传组件
        let tmpl = '<div class="img-box"><li class="weui-uploader__file" style="background-image:url(#url#)" path="#url#"></li><span class="image-remove">+</span></div>';
        let $gallery = $('#gallery');
        let $galleryImg = $('#galleryImg');
        let $uploaderInput = $('#uploaderInput');
        let $uploaderFiles = $('#uploaderFiles');
        let url = window.uploadPath + '/file/fileUpload?dir=image';
        $uploaderInput.on('change', function (e) {
          // let src;
          // let url = window.URL || window.webkitURL || window.mozURL;
          let files = e.target.files;
          if (files.length > 3) {
            that.showMsg('最多只能上传3张');
            return;
          }
          for (let i = 0, len = files.length; i < len; ++i) {
            if (that.files.length > 2) {
              return false;
            }
            let file = files[i];
            let formData = new FormData();
            formData.append('file', file);
            $.ajax({
              url: url,
              type: 'POST',
              async: false,
              cache: false,
              processData: false, // 告诉jQuery不要去处理发送的数据
              contentType: false, // 告诉jQuery不要去设置Content-Type请求头
              data: formData,
              success: function (result) {
                if (result.code !== 0) {
                  that.showMsg('上传失败');
                } else {
                  let imgPath = result.data.url;
                  $uploaderFiles.append($(tmpl.replace('#url#', imgPath).replace('#url#', imgPath)));
                  that.files.push(imgPath);
                  that.checkPhotoSize();
                  // 监听删除事件
                  $('.image-remove').click(function () {
                    let path = $(this).parent().find('li').attr('path');
                    let idx = that.files.indexOf(path);
                    if (idx > -1) {
                      that.files.splice(idx, 1);
                      $(this).parent().remove();
                      that.checkPhotoSize();
                    }
                  });
                }
              }
            });
          }
        });
        let index;
        $uploaderFiles.on('click', 'li', function () {
          index = $(this).index();
          $galleryImg.attr('style', this.getAttribute('style'));
          $gallery.fadeIn(100);
        });
        $gallery.on('click', function () {
          $gallery.fadeOut(100);
        });
        // 删除图片 删除图片的代码也贴出来。
        $('.weui-gallery__del').click(function () {
          let path = $uploaderFiles.find('li').eq(index).attr('path');
          let idx = that.files.indexOf(path);
          if (idx > -1) {
            that.files.splice(idx, 1);
            $uploaderFiles.find('li').eq(index).parent().remove();
            that.checkPhotoSize();
          }
        });

        // 河道点击选择
        $('#riverDiv').on('click', function () {
          let pickers = [];
          for (let i in that.rivers) {
            let data = that.rivers[i];
            pickers.push({label: data.name, value: data.id});
          }
          weui.picker(pickers, {
            onChange: function (result) {
              $('#riverDiv').empty().append(result[0].label);
              that.item.riverId = result[0].value;
              that.item.riverName = result[0].label;
            },
            onConfirm: function (result) {
              console.log(result);
            },
            title: '所在河道选择'
          });
        });
      },
      loadTypes() {
        let that = this;
        let pickers = [];
        pickers.push({label: '河岸倾倒垃圾', value: '河岸倾倒垃圾'});
        pickers.push({label: '生活非法排污', value: '生活非法排污'});
        pickers.push({label: '工业区非法排污', value: '工业区非法排污'});
        pickers.push({label: '非法采砂', value: '非法采砂'});
        pickers.push({label: '河道及禁养区非法养殖', value: '河道及禁养区非法养殖'});
        pickers.push({label: '河湖岸线乱搭乱建', value: '河湖岸线乱搭乱建'});
        pickers.push({label: '电鱼毒鱼', value: '电鱼毒鱼'});
        pickers.push({label: '饮用水源地污染', value: '饮用水源地污染'});
        pickers.push({label: '河面漂浮物及垃圾', value: '河面漂浮物及垃圾'});
        pickers.push({label: '面源污染', value: '面源污染'});
        pickers.push({label: '重金属污染', value: '重金属污染'});
        pickers.push({label: '场镇污水处理厂未建设', value: '场镇污水处理厂未建设'});
        pickers.push({label: '场镇污水处理厂未运行', value: '场镇污水处理厂未运行'});
        pickers.push({label: '场镇污水处理厂处理不达标', value: '场镇污水处理厂处理不达标'});
        pickers.push({label: '场镇污水管网收集率不高', value: '场镇污水管网收集率不高'});
        pickers.push({label: '电站截留生态流量', value: '电站截留生态流量'});
        pickers.push({label: '其他问题', value: '其他问题'});
        // 事件类型点击选择
        $('#showType').on('click', function () {
          weui.picker(pickers, {
            onChange: function (result) {
              $('#showType').empty().append(result[0].label);
              that.item.eventType = result[0].label;
            },
            onConfirm: function (result) {
              console.log(result);
            },
            title: '事件类型选择'
          });
        });
      },
      checkPhotoSize() { // 控制显示三张以内照片
        if (this.files.length > 2) {
          $('.weui-uploader__input-box').hide();
        } else {
          $('.weui-uploader__input-box').show();
        }
      },
      save() {
        if ($('#showTooltips').hasClass('weui-btn_disabled')) {
          return;
        }
        let that = this;
        for (let i in that.files) {
          if (that.item.treatmentPrePics === '') {
            that.item.treatmentPrePics = that.files[i];
          } else {
            that.item.treatmentPrePics = that.item.treatmentPrePics + ',' + that.files[i];
          }
        }
        let url = apiPath + '/api/report/reportEvent/newEventForWechat';
        axios.post(url, JSON.stringify(that.item),
          axiosContentType.json).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            that.showSuccess();
            setTimeout(function () {
              location.reload();
              wx.closeWindow();
            }, 2000);
          } else {
            that.showMsg(result.message);
          }
        });
      },
      showMsg(msg) {
        let $toast = $('#infoToast');
        if ($toast.css('display') !== 'none') return;
        $('#weui-toast__content').empty().append(msg);
        $toast.fadeIn(100);
        setTimeout(function () {
          $toast.fadeOut(100);
        }, 2000);
      },
      showSuccess() {
        let $toast = $('#toast');
        if ($toast.css('display') !== 'none') return;
        $toast.fadeIn(100);
        setTimeout(function () {
          $toast.fadeOut(100);
        }, 2000);
      },
      wxconfig() {
        var url = apiPath + '/api/wechat/getJsConfig?url=' + window.location.href;
        $.get(url, function (result) {
            if (result.code === 0) {
              let data = result.data;
              wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名
                jsApiList: ['closeWindow'] // 必填，需要使用的JS接口列表
              });
            }
          }
        )
      }
    }
  }

</script>
